<template>
  <div>
    <el-dialog v-model="props.dialogVisible" :title="newTitle" draggable width="800" :before-close="handleServiceClose">
      <el-form :inline="true" :model="submitFrom" label-width="auto" ref="tableRef" :rules="rules"
        label-position="left">
        <el-form-item label="服务商" prop="providerId" style="width: 100%" required>
          <el-select v-model="submitFrom.providerId" placeholder="请选择">
            <el-option v-for="(item, index) in sys_provider_list" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="登录账号" style="width: 100%" prop="username" required>
          <el-input placeholder="请输入" v-model.trim="submitFrom.username"></el-input>
        </el-form-item>
          <el-form-item label="登录密码" style="width: 100%" prop="password" :required="!showPwd" v-if="!showPwd">
            <el-input placeholder="请输入" v-model.trim="submitFrom.password" type="password" show-password
              :disabled="showPwd" />
          </el-form-item>
          <!-- <el-button type="primary" v-if="showBtn" @click="handleShowPwd">查看</el-button> -->
        <el-form-item label="注册邮箱" style="width: 100%" prop="email">
          <el-input placeholder="请输入" v-model.trim="submitFrom.email"></el-input>
        </el-form-item>
        <el-form-item label="注册手机" style="width: 100%" prop="phone">
          <el-input placeholder="请输入" v-model.trim="submitFrom.phone"></el-input>
        </el-form-item>
        <el-form-item label="注册日期" style="width: 100%" required prop="newTime">
          <el-date-picker v-model="submitFrom.newTime" type="datetime" placeholder="请选择" format="YYYY-MM-DD hh:mm:ss"
            value-format="x" style="width: 100%" />
        </el-form-item>
        <el-form-item label="备注" prop="remark" style="width: 100%">
          <el-input maxlength="300" show-word-limit type="textarea" placeholder="请输入" :rows="7" resize="none"
            v-model.trim="submitFrom.remark"></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleServiceClose">取消</el-button>
          <el-button type="primary" @click="handleServiceSure(tableRef)">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>



    <el-dialog v-model="showPassword" title=" " draggable width="20%" @close="handleShowPwdClose">
      <el-form :inline="true" :model="submitShowFrom" label-width="auto" ref="ShowAccountPwdRef" :rules="rules"
        label-position="left">
        <el-form-item label="" style="width: 100%" prop="username">
          <el-input size="large" auto-complete="off" placeholder="请输入用户名" v-model.trim="submitShowFrom.username">
            <template #prefix><svg-icon icon-class="user" /></template></el-input>
        </el-form-item>
        <el-form-item prop="password" style="width: 100%">
          <el-input v-model.trim="submitShowFrom.password" type="password" size="large" auto-complete="off"
            placeholder="密码">
            <template #prefix><svg-icon icon-class="password" /></template>
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button style="width: 100%;" type="primary" @click="handleShowPwdSure">
          确定
        </el-button>
      </template>
    </el-dialog>


  </div>
</template>
<script setup>
import { ref, defineProps, defineEmits, onMounted, watch } from "vue";
const emits = defineEmits(["handleServiceClose", "handleServiceSure"]);
const { proxy } = getCurrentInstance();
const newTitle = ref("新增"); //名称
const sys_provider_list = ref([]);
const tableRef = ref(null);
const showPassword = ref(false)//查看密码
const showPwd = ref(true)//查看密码
const showBtn = ref(false)//查看密码
const submitFrom = ref({
  providerId: null, //服务商
  username: "", //登录账号
  password: '',//密码
  email: "", //注册验证邮箱
  phone: "", //
  registerTime: "", //注册日期
  remark: "", //备注内容
  newTime: "",
}); //参数
const submitShowFrom = ref({
  id: null,
  username: '',
  password: ''
}); //参数

const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
  },
  // 传值数据对象
  listItem: {
    type: Object,
    default: {},
  },
});
watch(
  () => props.dialogVisible,
  () => {
    if (!props.dialogVisible) return;
    if (Object.keys(props.listItem).length) {
      showBtn.value = true
      showPwd.value = true
      newTitle.value = "编辑";
      submitFrom.value.providerId = props.listItem.providerId;
      submitFrom.value.username = props.listItem.username;
      submitFrom.value.email = props.listItem.email;
      submitFrom.value.phone = props.listItem.phone;
      submitFrom.value.remark = props.listItem.remark;
      submitFrom.value.newTime = proxy.DateTime(props.listItem.registerTime);
    } else {
      showBtn.value = false
      handleRest();
      newTitle.value = "新增";
      submitFrom.value.newTime = proxy.getCurrent();
    }
  }
);
// 确定事件
const handleServiceSure = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      submitFrom.value.registerTime = proxy.convertTime(
        1,
        submitFrom.value.newTime
      );

      if (newTitle.value === "新增") {
        site.general
          .sitecloudserverAdd({
            data: submitFrom.value,
          })
          .then((res) => {
            if (res.code === 200) {
              proxy.$modal.msgSuccess("新增成功");
              proxy.resetForm("tableRef");
              handleRest();
              emits("handleServiceSure");
            }
          });
      } else {
        site.general
          .sitecloudserverUpdatebyid({
            pathParams: {
              id: props.listItem.id,
            },
            data: {
              ...submitFrom.value,
              updatePassword:false
            },
          })
          .then((res) => {
            if (res.code === 200) {
              proxy.$modal.msgSuccess("修改成功");
              proxy.resetForm("tableRef");
              handleRest();
              emits("handleServiceSure");
            }
          });
      }
    }
  });
};
// 取消事件
const handleServiceClose = () => {
  handleRest();
  proxy.resetForm("tableRef");
  emits("handleServiceClose");
};
onMounted(() => {
  getList();
});
const getList = () => {
  site.general
    .siteserverproviderList({
      data: {
        pageNum: 1,
        pageSize: 999,
      },
    })
    .then((res) => {
      sys_provider_list.value = res.data;
    });
};
const handleRest = () => {
  submitFrom.value.providerId = null;
  submitFrom.value.username = "";
  submitFrom.value.email = "";
  submitFrom.value.phone = "";
  submitFrom.value.registerTime = "";
  submitFrom.value.remark = "";
  submitFrom.value.password = "";
  showPwd.value = false
};
const handleShowPwd = () => {//显示弹出框
  showPassword.value = true
}
const handleShowPwdClose = () => {//取消显示框
  proxy.resetForm("ShowAccountPwdRef");
  showPassword.value = false
  submitShowFrom.value = {
    id: null,
    username: '',
    password: ''
  }
}

const handleShowPwdSure = () => {
  proxy.$refs["ShowAccountPwdRef"].validate((valid, fields) => {
    if (!valid) return
    submitShowFrom.value.id = props.listItem.id
    site.general.sitecloudserverViewpassword({
      data: submitShowFrom.value
    }).then((res) => {
      if (res.code === 200) {
        showPassword.value = false
        submitFrom.value.password = res.data.password
        showPwd.value = false
      }
    });

  })
}
const rules = reactive({
  providerId: [{ required: true, message: "请选择", trigger: "blur" }],
  username: [
    { required: true, message: "请输入", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; // 账号
        const phoneRegex = /^1[3-9]\d{9}$/; // 手机号
        const usernameRegex = /^[\u4e00-\u9fa5a-zA-Z0-9_]{2,20}$/; // 用户名
        if (emailRegex.test(value)) {
          return callback();
        } else if (phoneRegex.test(value)) {
          return callback();
        } else if (usernameRegex.test(value)) {
          return callback();
        } else {
          return callback(new Error("输入格式不符合要求"));
        }
        callback();
      },
      trigger: 'blur'

    },
  ],
  password: [
    { required: true, message: "请输入", trigger: "blur" },
  ],
  email: [
    {
      pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
      message: "请正确填写邮箱",
      trigger: "blur",
    },
  ],
  phone: [
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请正确填写手机号",
      trigger: "blur",
    },
  ],
});
</script>